<template>
    <div class="m-iselect">
        <span class="value">按省份选择:</span>
        <el-select v-model="pvalue" placeholder="省份">
            <el-option
                v-for="item in province"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="cvalue" placeholder="城市" :disabled="!city.length">
            <el-option
                v-for="item in city"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
        </el-select>
        <span class="search">直接搜索:</span>
        <el-autocomplete
            v-model="input"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入城市中文或拼音"
            @select="handleSelect"
        >
        </el-autocomplete>
    </div>
</template>

<script>
import axios from 'axios'
// 引入这个包 就可以使用延时函数
import _ from 'lodash'
import { mapActions } from 'vuex'

export default {
    data() {
        return {
            province: [],
            city: [],
            pvalue: '',
            cvalue: '',
            input: '',
            cities: []
        }
    },
    methods: {
        querySearchAsync: _.debounce(async function (query,cb) {
            let _this = this
            if (_this.cities.length) {
                // 这是一个回调函数 筛选符合条件的
                cb(_this.cities.filter(item => item.value.indexOf(query) > -1))
            } else {
                // let {status,data: {city}} = await _this.$axios.get('/geo/city')
                // if (status === 200) {
                //     _this.cities = city.map((item) => {
                //         return {
                //             value: item.name
                //         }
                //     })
                //     cb(_this.cities.filter(item => item.value.indexOf(query) > -1))
                // }
                axios.get('/geo/city').then((res) => {
                    _this.cities = res.data.city.map((item) => {
                        return {
                            value: item.name
                        }
                    })
                    cb(_this.cities.filter(item => item.value.indexOf(query) > -1))
                })
            }
        },300),
        handleSelect(item) {
            
            const city = item.value
            localStorage.clear()
            window.location.href = '/'
            this.$store.dispatch('geo/change',city)
            // localStorage.setItem('city',city)
        }

    },
    watch: {
        async pvalue (newPvalue) {
            const _this = this
           let {status,data: {city}} = await _this.$axios.get(`/geo/province/${newPvalue}`)
           if (status === 200) {
              _this.city = city
               _this.cvalue = ''
           } 
        }
    },
  
    async mounted() {
        const _this = this
        let {status , data: {province}} = await _this.$axios.get('/geo/province')
        _this.province = province
        // if (status === 200) {
        //     _this.porvince = province.map((item) => {
        //         return {
        //             value: item.id,
        //             label: item.value
        //         }
        //     })
        //     console.log(this.province)
        // }
    }
}
</script>

<style lang="scss">
    .m-iselect {
        height: 71px;
        border-bottom: 1px solid #E5E5E5;
        .value {
            font-size: 16px;
            font-weight: 500;
            margin-right: 20px;
        }
        .el-select {
            width: 150px;
            height: 40px;
            margin-right: 15px;
            color: #666;
        }
        .search {
            font-size: 16px;
            font-weight: 500;
            margin-right: 15px;
            margin-left: 30px;
        }
        .el-autocomplete {
            color: #666;
            width: 220px;
            height: 40px;
        }
    }
</style>

